<template>
  <view class="popup-mask" v-if="showModal" @click.stop="onClose" @touchmove.stop>
    <view class="popup" @click.stop>
      <view class="popup-title">{{ props.title }}</view>
      <scroll-view class="popup-count" scroll-y @scrolltolower="loadPagingMore" @refresherrefresh="initPagingQuery"
        :refresher-enabled="openrefresher" :refresher-triggered="props?.refresher">
        <slot />
      </scroll-view>
      <view class="popup-bottom">
        <view class="btm-btn" @click.stop="onSub">确定</view>
        <view class="btm-btn btn-1" v-if="props?.canceltext" @click.stop="onCancel">{{ props?.canceltext || "取消" }}</view>
      </view>
    </view>
  </view>
</template>
<script setup>
import { useShowModal } from "@/path/hooks/v-model"

const props = defineProps({
  show: Boolean,
  canceltext: String,
  title: String,
  openrefresher: Boolean,
  refresher: Boolean,
})
const emit = defineEmits(['update:show', 'scrolltolower', 'refresherrefresh', 'submit', 'cancel'])

const { showModal, onClose } = useShowModal(props, emit)
function loadPagingMore() {
  emit('scrolltolower')
}
function initPagingQuery() {
  emit('refresherrefresh')
}

function onSub() {
  onClose()
  emit('submit')
}
function onCancel() {
  onClose()
  emit('cancel')
}

</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
